<template>
    <div>
        <h1>代办事项</h1>
        <div class="common-layout">
             <el-container>
                <el-header><SonHeader @add="addHandle"/></el-header>
                <!-- <el-main><SonMain :list="list" @finish="changeDad" @del="del"/></el-main> -->
                <el-main>
     <SonMain :list="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)" @finish="changeDad" @del="del"/>
   </el-main>
        <el-pagination
     layout="prev, pager, next"
     :total="list.length"
     :page-size="pageSize"
     :current-page="currentPage"
     @current-change="handlePageChange"
   />
                <el-footer><SonFooter :list="list" @show="show"/></el-footer>
            </el-container>
        </div>
  
 
    </div>
   

</template>
<script>
import SonFooter from '@/components/ToDo/SonFooter.vue';
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';


export default {
    components:{
        SonHeader,
        SonMain,
        SonFooter
    },
    data(){
        return{
            list:[{id:'001',content:'学习第一章',state:false,startDate:'2024-9-10',finishDate:''},
                {id:'002',content:'学习第二章',state:false,startDate:'2024-10-10',finishDate:''}

            ],
            now:new Date(),
            copyList:[],
            currentPage: 1,
            pageSize: 10,
            totalPages: 0
        }
    },
    created(){
        this.copyList=this.list.slice()
    },
    methods: {
            addHandle(val){
                this.list.push({
                    id:+new Date(),
                    content:val,
                    state:false,
                    startDate:this.fomateDate,
                    finishDate:''
                })
                this.copyList=this.list.slice()

            },
            changeDad(i){
                this.list[i].finishDate=this.fomateDate
                this.copyList=this.list.slice()
            },
            del(i){
                this.list.splice(i,1)
                this.copyList=this.list.slice()
            },
            show(flag){
                if(flag=='clear'){
                    this.list=[]
                    this.copyList=[]
                }
                else if(flag=='done'){
                    this.list=this.list.filter(v=>v.state==true)
                }
                else if(flag=='undo'){
                    this.list=this.copyList.filter(v=>v.state==false)
                }else{
                    this.list=this.copyList.slice()
                }
            },
            updateTotalPages() {
       this.totalPages = Math.ceil(this.list.length / this.pageSize);
     },
     handlePageChange(page) {
       this.currentPage = page;
     }
        },
        computed:{
            fomateDate(){
                let month=this.now.getMonth()+1
                return this.now.getFullYear()+'-'+month+'-'+this.now.getDate()
            }
            
     }
        }
        
    
    

</script>
<style>
#app{
    width: 800px;
    margin:auto
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
</style>